function Timeline () {
  this.initDone = false;
  // 参数
  this.option = {
    // 上一帧 时间
    lastFrameTime: framer(),
    // 启用帧
    frameElapsed: 0,
    width: window.innerWidth,
    height: window.innerHeight
  };

  /**
   * 环境着色器
   * @type {THREE.ShaderMaterial}
   */
  this.landscapeShaderMaterial = landscapeShaderMaterial;

  /**
   * 素材着色器
   * @type {THREE.ShaderMaterial}
   */
  this.canvasShaderMaterial = canvasShaderMaterial;

  /**
   * 线条着色器
   * @type {THREE.ShaderMaterial}
   */
  this.lineShaderMaterial = lineShaderMaterial;

  if (!this.initDone) {
    this.initDone = true;
    this.init()
  }
}

Timeline.prototype.init = function () {
  // 初始化 object
  this.objects = initObjects();

  console.log('xxxxxxxxxxxxxxxx')
};

Timeline.prototype.bindResizeEvent = function () {
  bindEvent(window, () => {
    const { innerWidth, innerHeight } = window;
    this.option.halfX = innerWidth / 2;
    this.option.halfY = innerHeight / 2;

    this.option.width = innerWidth;
    this.option.height = innerHeight;

    this.camera.aspect = innerWidth / innerHeight;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize( innerWidth, innerHeight );

    // 环境着色器 尺寸
    this.landscapeShaderMaterial.uniforms.scale.value = this.renderer.domElement.width / 1000;
  });
};

/**
 * 初始化 渲染器
 * @returns {boolean}
 */
Timeline.prototype.initRenderer = function() {
  const { width, height } = this.option;
  const renderer = new THREE.WebGLRenderer({ antialias: true });

  renderer.setPixelRatio(window.devicePixelRatio || 1);
  renderer.setSize(width, height);
  renderer.setClearColor(0x66685D, 1.0);

  this.option.halfX = width / 2;
  this.option.halfY = height / 2;

  if (width > height) {
    this.cameraYOffset = 1;
  }

  renderer.domElement.id = 'main-canvas';
  document.body.appendChild(renderer.domElement);

  this.itemGeometry = new THREE.PlaneBufferGeometry(1, 1);
  this.initScene();

  this.renderer = renderer;
  return true;
};

/**
 * 初始化场景与相机
 */
Timeline.prototype.initScene = function() {
  const { width, height } = this.option;
  const scene = new THREE.Scene();
  scene.frustumCulled = false;
  const camera = new THREE.PerspectiveCamera(50, width / height, 1, 3000);
  camera.position.z = 100;
  camera.position.y = 2;

  camera.target = new THREE.Vector3();
  camera.target.copy(camera.position);

  scene.fog = new THREE.Fog(0x66685D, 100, 400);

  // window.camera = camera;
  scene.add(camera);

  this.labelScene = new THREE.Scene();
  this.labelScene.fog = scene.fog;

  this.scene = scene;
  this.camera = camera;
  this.cameraVelocity = new THREE.Vector3();
};


Timeline.prototype.makeLine = function () {
  var smat = this.lineShaderMaterial.clone();
  smat.uniforms =  {
    color: {
      type: 'v3',
      value: new THREE.Vector3(mat.color.r, mat.color.g, mat.color.b)
    }
  };
  return new THREE.Line(geo, smat);
};

bootstrap ();
